<template>
  <div class="dynamic-table-wrapper">
    <!-- 操作栏插槽（可选，如新增、批量操作等） -->
    <slot name="actions"></slot>

    <el-table ref="tableRef" :data="tableData" border style="width: 100%" v-bind="tableProps">
      <!-- 序号列（可选，可通过配置控制是否显示） -->
      <el-table-column v-if="showIndexColumn" type="index" label="序号" width="80" align="center">
        <template #default="scope">
          {{ (pageInfo.currentPage - 1) * pageInfo.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <!-- 动态生成列 -->
      <el-table-column v-for="(column, index) in columns" :key="index" v-bind="getColProps(column)">
        <template #default="scope">
          <!-- 自定义列内容插槽 -->
          <slot :name="`${column.slotName}`" :row="scope.row" :column="column" :index="scope.$index">
            <!-- 默认内容：普通字段直接显示，支持 formatter 格式化 -->
            <template v-if="!column.formatter">
              {{ scope.row[column.prop] }}
            </template>
            <template v-else>
              {{ column.formatter(scope.row[column.prop], scope.row) }}
            </template>
          </slot>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件（可选，可通过配置控制是否显示） -->
    <el-pagination
      v-if="showPagination"
      :current-page="pageInfo.currentPage"
      :page-size="pageInfo.pageSize"
      :total="pageInfo.total"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, useTemplateRef, computed } from 'vue'
import { ElTable, ElTableColumn, ElPagination, ElButton } from 'element-plus'

// 接收的属性
const props = defineProps({
  // 表格列配置
  columns: {
    type: Array,
    default: () => []
  },
  // 表格数据
  tableData: {
    type: Array,
    default: () => []
  },
  // 表格额外属性（如高度、条纹等）
  tableProps: {
    type: Object,
    default: () => ({})
  },
  // 是否显示序号列
  showIndexColumn: {
    type: Boolean,
    default: true
  },
  // 是否显示操作列
  showActionColumn: {
    type: Boolean,
    default: true
  },
  // 是否显示分页
  showPagination: {
    type: Boolean,
    default: true
  },
  // 分页信息
  pageInfo: {
    type: Object,
    default: () => ({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })
  }
})

const emit = defineEmits([
  'size-change', // 分页大小变化
  'current-change', // 页码变化
  'view', // 查看事件
  'edit', // 编辑事件
  'delete' // 删除事件
])

const tableRef = useTemplateRef('tableRef')

// 处理列属性，过滤掉列配置中不需要透传给 el-table-column 的字段
const rootColProps = ['prop', 'label', 'formatter']
function omit(obj, keys) {
  const result = { ...obj }
  ;(Array.isArray(keys) ? keys : [keys]).forEach(key => {
    delete result[key]
  })
  return result
}
function getColProps(column) {
  return omit(column, rootColProps)
}

// 分页大小变化
const handleSizeChange = size => {
  emit('size-change', size)
}

// 页码变化
const handleCurrentChange = page => {
  emit('current-change', page)
}

// 暴露表格实例方法
defineExpose({
  // 可根据需要暴露 el-table 的方法，如 clearSelection 等
  clearSelection: () => tableRef.value.clearSelection(),
  toggleRowSelection: (row, selected) => tableRef.value.toggleRowSelection(row, selected)
})
</script>

<style scoped>
.dynamic-table-wrapper {
  margin: 16px 0;
}
</style>